<template>
  <div class="_wz_cent_main _wz_cent_areaStatistics" style="background: #f5f7f9;padding: 10px;overflow: hidden;">

    <Row :gutter="10">
      <i-col :md="24" :lg="8" style="height: 250px;">
        <Card shadow>
          <p slot="title">运输车辆车龄统计</p>
          <p slot="extra" style="color: #01AAED;">
            <span style="font-family: LGDR;font-size: 18px;" v-if="!!vehicleData">
              {{vehicleData.oneYear+vehicleData.oneToThreeYear+vehicleData.threeToFourYear+vehicleData.fiveYear}}
            </span>辆
          </p>
          <div style="height: 100%;" class="_wz_cent_areaStatistics_chunk" v-if="!!vehicleData">
            <Row :gutter="8">
              <i-col span="12">
                <div>
                  <strong>1 年以下运营车辆数</strong>
                  <strong style="color: #757474;"><span>{{vehicleData.oneYear}}</span>辆</strong>
                </div>
              </i-col>
              <i-col span="12">
                <div>
                  <strong>1 到 3 年运营车辆数</strong>
                  <strong style="color: #757474;"><span>{{vehicleData.oneToThreeYear}}</span>辆</strong>
                </div>
              </i-col>
              <i-col span="12">
                <div>
                  <strong>3 到 5 年运营车辆数</strong>
                  <strong style="color: #757474;"><span>{{vehicleData.threeToFourYear}}</span>辆</strong>
                </div>
              </i-col>
              <i-col span="12">
                <div>
                  <strong>5 年以上运营车辆数</strong>
                  <strong style="color: #757474;"><span>{{vehicleData.fiveYear}}</span>辆</strong>
                </div>
              </i-col>
            </Row>
          </div>
        </Card>
      </i-col>
      <i-col :md="24" :lg="8" style="height: 250px;">
        <Card shadow>
          <p slot="title">货运挂车车龄统计</p>
          <p slot="extra" style="color: #01AAED;">
            <span style="font-family: LGDR;font-size: 18px;" v-if="!!hangData">
              {{hangData.oneYear+hangData.oneToThreeYear+hangData.threeToFourYear+hangData.fiveYear}}
            </span>辆
          </p>
          <div style="height: 100%;" class="_wz_cent_areaStatistics_chunk" v-if="!!hangData">
            <Row :gutter="8">
              <i-col span="12">
                <div>
                  <strong>1 年以下运营挂车数</strong>
                  <strong style="color: #757474;"><span>{{hangData.oneYear}}</span>辆</strong>
                </div>
              </i-col>
              <i-col span="12">
                <div>
                  <strong>1 到 3 年运营挂车数</strong>
                  <strong style="color: #757474;"><span>{{hangData.oneToThreeYear}}</span>辆</strong>
                </div>
              </i-col>
              <i-col span="12">
                <div>
                  <strong>3 到 5 年运营挂车数</strong>
                  <strong style="color: #757474;"><span>{{hangData.threeToFourYear}}</span>辆</strong>
                </div>
              </i-col>
              <i-col span="12">
                <div>
                  <strong>5 年以上运营挂车数</strong>
                  <strong style="color: #757474;"><span>{{hangData.fiveYear}}</span>辆</strong>
                </div>
              </i-col>
            </Row>
          </div>
        </Card>
      </i-col>
      <i-col :md="24" :lg="8" style="height: 250px;">
        <Card shadow>
          <p slot="title">从业人员身份类型统计</p>
          <p slot="extra" style="color: #01AAED;">
            <span style="font-family: LGDR;font-size: 18px;" v-if="!!charTotal">
              {{charTotal.driverTotal}}
            </span>人
          </p>
          <div style="height: 100%;" class="_wz_cent_areaStatistics_chunk">
            <Row :gutter="8" v-if="driverTypeProportion">
              <template v-for="item,index in driverTypeProportion">
                <i-col span="8">
                  <div>
                    <strong>{{item.driverTypeName}}</strong>
                    <strong><span>{{item.total}}</span>人</strong>
                  </div>
                </i-col>
              </template>
            </Row>
          </div>
        </Card>
      </i-col>
      <i-col :lg="18" style="height: 300px;">
        <Card shadow>
          <p slot="title">车辆行驶报警监控统计</p>
          <div style="height: 100%;" ref="wzCentreHeight">
            <line-chart6 :bottomHeight="centreHeight" v-if="centreHeight !== 0 && lineChart6PoliceData.type" :lineChart6Data="lineChart6PoliceData"></line-chart6>
          </div>
        </Card>
      </i-col>
      <i-col :lg="6" style="height: 300px;">
        <Card shadow>
          <p slot="title">运输车辆报警排名</p>
          <div style="height: 100%;" ref="wzTopHeight">
            <dl class="_wz_ranking">
              <template v-for="item,index in ranking">
                <dd v-if="index < 5"><strong :class="index > 1?'':'rankingClass'">{{index + 1}}</strong>{{item.carPlateNo}}<span>{{item.alarmCount}}次</span></dd>
              </template>
            </dl>
          </div>
        </Card>
      </i-col>
      <i-col :lg="8" style="height: calc(100% - 10px - 250px - 10px - 300px);">
        <Card shadow>
          <p slot="title">运输车辆排放标准统计</p>
          <div style="height: 100%;" ref="wzBottomHeight">
            <line-chart6 :bottomHeight="bottomHeight" v-if="bottomHeight !== 0 && lineChart6Data.type" :lineChart6Data="lineChart6Data"></line-chart6>
          </div>
        </Card>
      </i-col>
      <i-col :lg="16" style="height: calc(100% - 10px - 250px - 10px - 300px);">
        <Card shadow>
          <p slot="title">运营里程统计</p>
          <div style="height: 100%;" ref="wzBottomHeight">
            <lineChart2 :bottomHeight="bottomHeight" v-if="bottomHeight !== 0 && lineChart2Data.type" :lineChart2Data="lineChart2Data"></lineChart2>
          </div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>
<script>

  import lineChart1 from '../Chart/lineChart/lineChart1.vue'
  import lineChart2 from '../Chart/lineChart/lineChart2.vue'
  import lineChart6 from '../Chart/lineChart/lineChart6.vue'

  import huan from '../Chart/lineChart/huan.vue'

  import paiming from '../Chart/lineChart/paiming.vue'


  export default {
    components: {
      lineChart1,//
      lineChart2,//
      lineChart6,//
      paiming,//

      huan,//
    },
    data() {
      return {

        //车辆车龄
        vehicleData: null,
        //挂车车龄
        hangData: null,
        ranking: [],//报警排名

        centreHeight: 0,//中间统计图高度
        bottomHeight: 0,//底部统计图高度 统计图需要传输高度
        loadingNum: 8,
        charTotal: null,//统计总数
        driverTypeProportion: null,//人员类型统计


        //30天报警
        lineChart6PoliceData: {
          type: false,
          "id": "charId7",
          "data": [],
          "unit": "公里",
          "style": {
            "padding": [30, 20, 30, 60]
          }
        },
        //
        lineChart2Data: {
          type: false,
          "id": "charId9",
          "data": [],
          "unit": "",
          "style": {
            "padding": [30, 20, 30, 60]
          }
        },
        //30天运营
        lineChart6Data: {
          type: false,
          "id": "charId6",
          "data": [],
          "unit": "公里",
          "style": {
            "padding": [30, 20, 30, 60]
          }
        },
        polycyclicData: {
          type: true,
          "id": "charId8",
          "data": [],
          "unit": "公里",
          "style": {
            "padding": [30, 20, 30, 60]
          }
        }

      }
    },
    beforeCreate() {//beforeCreate创建前状态
      this.$Spin.show();
    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      that.$nextTick(function () {
        that.centreHeight = that.$refs.wzCentreHeight.offsetHeight;
        that.bottomHeight = that.$refs.wzBottomHeight.offsetHeight;
      })


      //车辆车龄统计
      that.axios.get(that.apiUrl.companyIndexVehicleAgeProportion, {params: {type: 1}})
      .then(res => {
        that.loadingNum = that.loadingNum - 1;
        if (!!res) {
          if (!!res.data.data[0]) {
            that.vehicleData = res.data.data[0];

          }
        }
      }).catch(err => {
        console.log('失败', err);
      })

      //挂车车龄统计
      that.axios.get(that.apiUrl.companyIndexVehicleAgeProportion, {params: {type: 2}})
      .then(res => {
        that.loadingNum = that.loadingNum - 1;
        if (!!res) {
          if (!!res.data.data[0]) {
            that.hangData = res.data.data[0];
          }
        }
      }).catch(err => {
        console.log('失败', err);
      })

      //统计企业下各个类型从业人员总数
      that.axios.get(that.apiUrl.companyIndexDriverTypeProportion)
      .then(res => {
        that.loadingNum = that.loadingNum - 1;
        if (!!res) {
          that.driverTypeProportion = res.data.data;
        }
      }).catch(err => {
        console.log('失败', err);
      })

      //统计车辆、挂车、人员等总数
      that.axios.get(that.apiUrl.companyIndexDataTotal)
      .then(res => {
        that.loadingNum = that.loadingNum - 1;
        if (!!res) {
          that.charTotal = res.data.data;
        }
      }).catch(err => {
        console.log('失败', err);
      })

      //30天运营汇总
      that.axios.get(that.apiUrl.companyIndexPositionStatistics)
      .then(res => {
        that.loadingNum = that.loadingNum - 1;
        if (!!res) {

          res.data.data.dateList.forEach(function (k, i) {
            that.lineChart2Data.data.push({
              month: k,//
              city: '运营里程统计（公里）',
              temperature: res.data.data.mileageSumList[i]
            })
          })
          that.lineChart2Data.type = true;
        }
      }).catch(err => {
        console.log('失败', err);
      })

      //30天报警统计汇总
      that.axios.get(that.apiUrl.companyIndexAlarmStatistics)
      .then(res => {
        that.loadingNum = that.loadingNum - 1;
        if (!!res) {
          res.data.data.dateList.forEach(function (k, i) {
            that.lineChart6PoliceData.data.push({
              company: '报警监控（次）',//
              type: k,
              value: res.data.data.alarmSumList[i]
            })
          })
          that.lineChart6PoliceData.type = true;
        }
      }).catch(err => {
        console.log('失败', err);
      })

      //30天报警前10辆车  companyIndexAlarmTop
      that.axios.get(that.apiUrl.companyIndexAlarmTop)
      .then(res => {
        that.loadingNum = that.loadingNum - 1;
        if (!!res) {
          that.ranking = res.data.data;
        }
      }).catch(err => {
        console.log('失败', err);
      })


      //运输车辆排放标准统计
      that.axios.get(that.apiUrl.companyIndexEmissionStandardsProportion)
      .then(res => {
        that.loadingNum = that.loadingNum - 1;
        if (!!res) {
          res.data.data.forEach(function (k, i) {
            that.lineChart6Data.data.push({
              company: '排放标准',//
              type: k.emissionStandards,
              value: k.total
            })
          })
          that.lineChart6Data.type = true;
        }
      }).catch(err => {
        console.log('失败', err);
      })

    },
    methods: {//执行的方法
    },
    watch: {//监听
      loadingNum(news, old) {
        if (news === 0) {
          this.$Spin.hide();
        }
      }

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }

  }
</script>

<style lang="less">
  /*@import '../../assets/LETS-GO-DIGITAL-REGULAR.TTF';*/
  /*@font-face {*/
  /*font-family: LGDR;*/
  /*font-weight: normal;*/
  /*src: url('../../assets/LETS-GO-DIGITAL-REGULAR.TTF');*/
  /*}*/

  ._wz_cent_areaStatistics {
    overflow: hidden;

    .ivu-row {
      height: 100%;

      .ivu-col {
        margin-bottom: 10px;

        .ivu-card {
          height: 100%;

          .ivu-card-body {
            padding: 8px !important;
            height: calc(100% - 51px);
          }
        }
      }
    }

    ._wz_cent_areaStatistics_chunk {
      .ivu-col {
        margin: 4px 0 !important;
        height: (100% - 16px) / 2;

        div {
          height: 100%;
          padding: 10px 20px;
          background-color: #f8f8f8;

          strong {
            display: block;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 2px;
            line-height: 26px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span {
            /*display: block;*/
            color: #009688;
            font-size: 18px;
            line-height: 30px;
          }
        }
      }
    }
  }

  ._wz_ranking {
    padding: 5px 10px;
    height: 100%;

    dd {
      line-height: 46px;

      .rankingClass {
        color: #1890ff;
        border: 1px solid #1890ff;
        background: #f0faff;
      }

      strong {
        color: #6d6b6b;
        display: inline-block;
        width: 23px;
        height: 23px;
        text-align: center;
        line-height: 23px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background: #e1e1e1;
        margin: 0 5px 0 0;
      }

      span {
        float: right;
      }
    }
  }
</style>
